<template>
    <div class="swiper-container" ref="cur">
        <div class="swiper-wrapper" >
            <div class="swiper-slide" v-for="(carousel,index) in list" :key="carousel.id">
                <img :src="carousel.imgUrl">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name: 'Carousel',
    props:["list"],
    watch:{
        list:{
            immediate:true,
            handler(newValue,oldValue){
                // 现在通过watch监听list属性的属性值的变化
                // 如果执行handlder方法，代表组件实例身上这个属性的属性值已经有了【数组：四个元素】
                // 当这个函数执行：只能保证bannerList数据已经有了，但是你没有办法保证v-for已经执行结束了
                // v-for执行完毕，才有结构【现在在watch当中没办法保证】
                // nextTick：在下次DOM更新 循环结束之后 执行延迟回调。  在 修改数据之后 立即使用这个方法，获取更新后的DOM。
                this.$nextTick(()=>{
                        var mySwiper = new Swiper (this.$refs.cur, {
                        loop: true, // 循环模式选项
                        
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            // 点击小球的时候也切换图片
                            clickable:true
                        },
                        
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    
                    })        
            })
            }
        }
    }
};
</script>

<style lang="less" scoped>

</style>